<template>
  <div>
    <my-header backBtn>
      <div slot="title">
        SOS报警
      </div>

    </my-header>

    <div class="weui-cells" style="text-align: left">
      <a class="weui-cell weui-cell_access" href="javascript:;" v-for="item in sosList">
        <div class="weui-cell__bd" @click="goToMapFn(item)">
          <p>宝贝名字：{{studentName}}<span class="gps-code2" v-if="item.sos==0">已读</span><span class="gps-code3" v-else>未读</span></p>
          <p>时间：<span class="gps-code" >{{item.uploadTime}}</span></p>
          <p>地点：<span class="gps-code" >{{item.add}}</span></p>
        </div>
      </a>
    </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        student_id: '',
        studentName:'',
        url:'',
        sosList: []
      }
    },
    methods: {
      fetchGpsSosContent() {

        this.$http.fetchGpsSosCon(this.student_id).then(resp => {
          let data = resp.data;
          this.sosList = data;

        }).catch(resp => {

        })
      },
      goToMapFn(student){
        this.$http.upSosCon({studentId:this.student_id, id:student.id}).then(resp=>{
          //this.$weui.topTips("成功");
          let data={
            add:student.add,
            lng:student.lng,
            lat:student.lat,
            locationTime:student.uploadTime,
            name:this.studentName,
            url:this.url
          }

          this.$router.push({
            path:'/SosDetail',
            query:data
          })
        })
      },
    },
    mounted() {
      let data = this.$route.query;
      this.student_id = data.id;
      this.studentName = data.name;
      this.url = data.url;
      this.fetchGpsSosContent();
    },
    created() {

    }

  }
</script>

<style scoped>
  .tishi{
    margin-top: 10px;
    margin-left: 10px;
    text-align: left;
    color: #ef5e63;
  }
  .gps-code{
    margin-left: 5px;
    font-weight:normal;
    color: #828282;
    font-size: 13px;
  }
  .gps-code2{
    background:#49c13a ;
    padding-right: 5px;
    padding-left: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    float: right;
    font-weight:normal;
    color: #fff;
    font-size: 12px;
  }
  .gps-code3{
    background:#ef5e63 ;
    padding-right: 5px;
    padding-left: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    float: right;
    font-weight:normal;
    color: #fff;
    font-size: 12px;

  }
  .jiebang{
    color: #49c13a;
  }
  .bangding{
    color: #ef5e63;
  }
  .jiebangcaozuo{
    color: #000000;
  }
  .dialog_close{
    margin-top: 8px;
    margin-right: 8px;
    float: right;
  }
  .sure_color{
    color: #36c12d;
  }
  .baobaoxingming{
    color: #000000;
    margin: 8px;
  }
</style>
